<template>
  <div class="login-bg size-full flex-center pure-scrollbar flex-grow">
    <div class="login-box p-[24px]">
      <div class="login-text">
        <div class="text-[30px] font-black text-[#3673f5] text-center">
          山海大模型生产系统
        </div>
      </div>
      <div class="login-form">
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue';

  const LoginForm = defineAsyncComponent(
    () => import('./components/LoginForm.vue'),
  );
</script>

<style scoped lang="scss">
  .login-bg {
    background: url(../../assets/images/login-bg.png);
  }

  .login-box {
    box-shadow: 0 0 20px #f1f7ff80;
    width: 432px;
    height: 420px;
    margin: auto;
    overflow: hidden;
    background-size: 100% 100%;
    border-radius: 30px;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 10%;
    background: #fff;
  }
  .login-text {
    padding: 0 10px;
  }

  .login-form {
    margin-top: 32px;
  }
</style>
